import React from 'react';
import ReactDOM from 'react-dom'
import { inject, observer } from 'mobx-react';
import {Spin,Button,Menu,Icon,Modal,Tooltip,Row,Col,message} from 'antd'
import { WeaTableNew } from "comsMobx";
import { WeaTab,WeaBrowser,WeaLocaleProvider,WeaNewScroll,WeaRightMenu,WeaInput,WeaDropdown,WeaSelect,WeaDatePicker,WeaSlideModal,WeaSearchGroup,WeaFormItem,WeaTop,WeaCheckbox,WeaTag,WeaProgress,WeaNewScrollPagination } from 'ecCom';
import { routerShape } from 'react-router';
import ViewTree from '../../public/viewtree/ViewTree';
import ViewSort from '../../public/viewsort/ViewSort';
import TaskAdd from './TaskAdd';
import TagChoiceBox from '../../public/tag/TagChoiceBox'
import TagSelectBox from "../../public/tag/TagSelectBox"
import TaskDetail from './TaskDetail';
import ImportIndex from '../task/taskexecl/ImportIndex';
import * as Util from '../../util/Util'
const toJS = mobx.toJS;
const getLabel = WeaLocaleProvider.getLabel;
const { ButtonSelect } = WeaDropdown;
const WeaTable = WeaTableNew.WeaTable;

@inject('taskMainStores')
@observer
export default class TaskMain extends React.Component {
    static contextTypes = {
        router: routerShape
    }
    constructor(props) {
        super(props);
        this.state ={
            content :"",
            refeshid:-1,
            _top:Util.getHeaderObjectHeight(),
            menuid:1,
            showSearchAd:false,
            orderData:[//排序字段
                {key: "",selected: false,showname: getLabel(19520 ,'最后修改时间')},
                {key: "enddate",selected: false,showname: getLabel(741, '结束日期')},
                {key: "begindate",selected: false,showname: getLabel(740,'开始日期')},
                {key: "principalid",selected: false,showname: getLabel(84043,'责任人')},
            ],
            orderByData:[//排序方式
                {key: "asc",selected: false,showname: getLabel(339,'升序')},
                {key: "desc",selected: false,showname: getLabel(340,'降序')},
            ],
            levarray:[{key: '',selected: true,showname: getLabel(18214,'请选择')},
                {key: '0',selected: false,showname: getLabel(15808,'未设置')},
                {key: '1',selected: false,showname:getLabel(382501,'重要紧急')},
                {key: '2',selected: false,showname: getLabel(382502,'重要不紧急')},
                {key: '3',selected: false,showname:getLabel(382503,'不重要紧急')},
                {key: '4',selected: false,showname:getLabel(382504,'不重要不紧急')}],
            statusArray:[{
                    key:'status',
                    label: getLabel(602,'状态'),
                    options: [
                        {key: "0",selected: false,showname: getLabel(332,'全部')},
                        {key: "1",selected: false,showname: getLabel(1960,'进行中')},
                        {key: "4",selected: false,showname: getLabel(515068,"待确认")},
                        {key: "5",selected: false,showname: getLabel(83221,"已拒绝")},
                        {key: "6",selected: false,showname: getLabel(19134,"审批中")},
                        {key: "2",selected: false,showname: getLabel(23774,'已完成')},
                    ]
                }],
            dropData:[{ key: '1', show: getLabel(32136,'批量删除')},
                      { key: '2', show: getLabel(390705,'批量标记')}],
            createvisable:false,
            dropSelectedKey:1,
            tagvisable:false,
            opentagtype:1,
            selecttaskid:'',
            collectParams:{},
            importvisable:false
        }
        this.currenttaskid = Util.getParams("taskid");
        this.firstview = false;
        this.rowSelection = {
            selectedRowKeys: this.props.taskMainStores.tableSelectedRowKeys,
            onChange: this.onTableSelectChange
        }
    }
    componentWillMount() {//一些初始化请求
        const { taskMainStores,condtype,sorttype,showtype,status,viewId} = this.props;
        Util.setWindowKeys(this.props.menuid,(this.props.toptitle || getLabel(18505,'任务列表')));
        if(condtype!=null && condtype!=undefined){
            taskMainStores.condtype = condtype;
        }else{
            taskMainStores.condtype = "1";
        }
        if(viewId!=undefined && viewId!=0){
            taskMainStores.viewId = viewId;
            taskMainStores.sorttype = sorttype;
            taskMainStores.dataShowType = showtype;
            taskMainStores.currentstatus = status;
        }
        let cstartdate = Util.getParams("startdate");//创建开始时间
        let cenddate = Util.getParams("enddate");//创建结束时间
        let personType = Util.getParams("personType");//人员类型
        let hrmid = Util.getParams("hrmid");//人员id
        let reportstatus = Util.getParams("status");
        if(hrmid!=undefined && hrmid!=""){
            taskMainStores.isOutSearch = true;
            taskMainStores.cuserid = hrmid;
            taskMainStores.personType = personType;
            taskMainStores.cstartdate = cstartdate;
            taskMainStores.cenddate = cenddate;
            taskMainStores.reportstatus = reportstatus;
           // taskMainStores.getTaskList({hrmid:hrmid,reportstatus:reportstatus,personType:personType,cstartdate:cstartdate,cenddate:cenddate,condtype:true});
        }
        this.setCollection(taskMainStores.condtype,this.props.toptitle || getLabel(18505,'任务列表'));
        taskMainStores.getTaskList({});
        if(this.currenttaskid!=""){
            this.onNodeClick(this.currenttaskid);
        }
    }
    componentWillReceiveProps(newProps) {
        if(this.props.menuid!=newProps.menuid || this.props._time!=newProps._time){
            Util.setWindowKeys(newProps.menuid,newProps.toptitle);
            const { taskMainStores,condtype} = newProps;
            if(condtype!=null && condtype!=undefined){
                taskMainStores.condtype = condtype;
            }
            this.setState({menuid: condtype});
            this.resetSearch();
            this.setCollection(taskMainStores.condtype,newProps.toptitle);
            taskMainStores.getTaskList({});
        }
    }
    getMenu = () => {
        const { sorttype, dataShowType } = this.props.taskMainStores
        let menu = [
            {
                key: '0',
                icon: <i className='icon-coms-search' />,
                content: getLabel(197,'搜索'),
                onClick: key => this.advanceSearch()
            },
            { 
                key: '1',
                icon: <i className='icon-coms-Add-to' />,
                content: getLabel(82,'新建'),
                onClick: key => {this.onAddTask(-2)}
            },
            { 
                key: '2',
                icon: <i className='icon-coms-leading-in' />,
                content: getLabel(28577,'导入任务'),
                onClick: key => {this.importTask(true)}
            }
        ]
        if (sorttype == "1") {
            if (dataShowType == "2") {
                menu = menu.concat([
                    {
                        key: '3',
                        icon: <i className="icon-coms-task-list" />,
                        content: getLabel('81640','滚动显示'),
                        onClick: () => this.onDataShowTypeChange("1")
                    },
                    {
                        key: '4',
                        icon: <i className='icon-coms-Custom'/>,
                        content: getLabel(32535,'显示列定制'),
                        onClick: this.showColumn
                    }
                ])
            } else {
                menu.push({
                    key: '5',
                    icon: <i className="icon-coms-form" />,
                    content: getLabel('517579','分页显示') ,
                    onClick: () => this.onDataShowTypeChange("2")
                })
            }
        }
        return menu
    }
    showColumn = () => {    //显示列定制
        const {taskMainStores: { tableStore }} = this.props
        tableStore.setColSetVisible(true)
        tableStore.tableColSet(true)
    }
    onDataShowTypeChange = (dataShowType) => {
        const { changeDataShowType, getTaskList } = this.props.taskMainStores
        changeDataShowType(dataShowType)
        getTaskList({})
    }
    //设置收藏名称
    setCollection = (condtype,toptitle) =>{
        let collectParams = {
            favname: toptitle,
            favouritetype: 5,
            link: '/spa/workrelate/static/index.html#/main/workrelate/task/taskIndex?condtype='+condtype,
            importantlevel: 1,
        }
        this.setState({collectParams:collectParams})
    }
    //重置
    resetSearch(){
        const {taskMainStores}  = this.props;
        taskMainStores.principalid = [];
        taskMainStores.hrmid = [];
        taskMainStores.begindate = '';
        taskMainStores.enddate='';
        taskMainStores.lev='';
        taskMainStores.begindate1='';
        taskMainStores.enddate1="";
        taskMainStores.orderby = "";
        taskMainStores.taskname = "";
        taskMainStores.orderbytype="desc";
        // taskMainStores.tag = "";
    }
    onSearchChange(val,type){
        const {taskMainStores}  = this.props;
        let flag = true;
        if((type=="enddate" && taskMainStores.enddate1!="" && Util.DateDiffDays(val,taskMainStores.enddate1)<0) || 
            (type=="enddate1" && taskMainStores.enddate!="" && Util.DateDiffDays(val,taskMainStores.enddate)>0) || 
            (type=="begindate" && taskMainStores.begindate1!="" && Util.DateDiffDays(val,taskMainStores.begindate1)<0)||
            (type=="begindate1" && taskMainStores.begindate!="" && Util.DateDiffDays(val,taskMainStores.begindate)>0)){
            flag = false;
        }
        if(!flag){
            message.warning(getLabel(518654,'日期选择有误'));
            taskMainStores[type] = val;
            taskMainStores[type] = "";
            return;
        }
        taskMainStores[type] = val;
        if(type=="currentstatus"){
            taskMainStores.getTaskList({});
        }
    }
    advanceSearch(_hrmid){
        const {taskMainStores}  = this.props;
        if(_hrmid && _hrmid.length>0){
            taskMainStores.hrmid = _hrmid;
        }
        this.showAdvanced();
        taskMainStores.getTaskList({});
    }
    showMore(e,idx,_total,_pagenum,tid){
        const { taskMainStores } = this.props;
        taskMainStores.getTaskMoreList({index:idx,pagenum:parseInt(_pagenum)+1,total:_total,cate:tid});
    }

    //右侧按钮点击事件  cidx 主数组的索引值  idx右侧按钮数组的索引值
    onRightBtnClick(key,element,comsbtn,_tags,cb){
        let type = element.type;
        if(type){
            const { taskMainStores } = this.props;
            if(type=="delete"){  //删除
                Modal.confirm({
                    title: getLabel(131329,'信息确认'),
                    content: getLabel(508794,'确认要删除此任务吗？'),
                    onOk() {
                        taskMainStores.toChangeStatus({"taskId":key,"status":4,doback:function(){
                            message.success(getLabel(83472,'删除成功!'), 2);
                            typeof cb === "function" && cb()
                        }});
                    },
                    onCancel() {},
                });
            }else if(type=="complete"){ //标记完成
                Modal.confirm({
                    title: getLabel(131329,'信息确认'),
                    content: getLabel(508674,'确认要标记此任务为完成吗？'),
                    onOk() {
                        taskMainStores.toChangeStatus({"taskId":key,"status":2,"comsbtn":comsbtn,"type":type,doback:function(){
                            message.success(getLabel(31439,'更新成功!'), 2);
                            typeof cb === "function" && cb()
                        }});
                    },
                    onCancel() {},
                });
            }else if(type=="progress"){ //标记进行
                Modal.confirm({
                    title: getLabel(131329,'信息确认'),
                    content: getLabel(508676,'确认要标记此任务为进行中吗？'),
                    onOk() {
                        taskMainStores.toChangeStatus({"taskId":key,"status":1,"comsbtn":comsbtn,"type":type,doback:function(){
                            message.success(getLabel(31439,'更新成功!'), 2);
                            typeof cb === "function" && cb()
                        }});
                    },
                    onCancel() {},
                });
            }else if(type=="special"){ //关注
                taskMainStores.setSpecial({"taskid":key,"special":0,"comsbtn":comsbtn,"type":type,doback:function(){
                    message.success(getLabel(503769,'关注成功!'), 2);
                    typeof cb === "function" && cb()
                }});
            }else if(type=="canclespecial"){ //取消关注
                taskMainStores.setSpecial({"taskid":key,"special":1,"comsbtn":comsbtn,"type":type,doback:function(){
                    message.success(getLabel(503772,'取消关注成功!'), 2);
                    typeof cb === "function" && cb()
                }});
            }else if(type=="addfb"){
                this.onNodeClick(key,1);
            }else if(type=="tag"){
                if(_tags){
                    taskMainStores.checkedIds = _tags.map((d, i) => d.id);
                }
                this.onTagSet(true,2,key);
            }
        }
    }
    //树结构下展开子节点点击事件
    onIconClick(key){
        const { taskMainStores } = this.props;
        if(key!=""){
            taskMainStores.getChildTaskList({taskid:key,sorttype:4});
        }
    }
    //视图change
    onSortcondClick(val){
        const { taskMainStores } = this.props;
        taskMainStores.sorttype = val;
        taskMainStores.getTaskList({});
    }
    //高级搜索任务名称搜素框
    onTabSearchChange(val){
        const { taskMainStores } = this.props;
        taskMainStores.taskname = val;
    }
    //关闭侧拉框
    onCloseSlideModal(){
        const { taskMainStores } = this.props;
        taskMainStores.slidevisible = false;
    }
    resetUrlKey(){
         //弹框更改url上的_key值
         const { pathname, search } = this.props;
         let url = `/${pathname}${search}`;
         if (pathname == undefined || search == undefined) {
             if(location.href.indexOf("/main/workrelate/task/taskIndex")>-1){
                url = "/main/workrelate/task/taskIndex";
             }else if(location.href.indexOf("/main/workrelate/task/taskMain")>-1){
                url = "/main/workrelate/task/taskMain";
             }
         }
         this.context.router.push({
             pathname: url
         });
    }
    onEnterTask(e,type,idx){
       let keycode = e.keyCode;
       if(keycode == 13){
        this.onAddTask(type,e.target.value,idx);
       }
    }
    //快捷创建任务
    onAddTask(type,v,idx,e){
        this.resetUrlKey();
        if(type==-2){
            this.setState({createvisable:true});
        }else{
            if(v.trim()!="" && v.trim()!="null"){
                const { taskMainStores } = this.props;
                if(taskMainStores.sorttype==1 || taskMainStores.sorttype==4){
                    taskMainStores.addname = v;
                }
                let _this = this;
                taskMainStores.addTask({datetype:type,taskName:v,index:idx,doback:function(tid){
                    let _refeshid = -1;
                    const {_top,refeshid} = _this.state;
                    if(refeshid==-1){
                        _refeshid = 0;
                    }
                    taskMainStores.slidevisible = true;
                    _this.setState({content:<TaskDetail ecId={`${this && this.props && this.props.ecId || ''}_TaskDetail@juuyxb`} detailKey={tid} refeshid={_refeshid} isopen={true} sorttype={taskMainStores.sorttype} minusHeight={_top} onEditSuccess={(arry,type)=>_this.onCallBackSuccess(arry,type)}/>,refeshid:_refeshid});
                }});
            }
        }
    }
    //新增页面 编辑页面成功回调
    onCallBackSuccess(optparams,type){
        if(type==1){
            this.onCloseSlideModal();
        }else{
            const { taskMainStores } = this.props;
            taskMainStores.setNewTaskInfo(optparams);
            if (taskMainStores.dataShowType == "2") {
                this.reloadCurrentPage()
            } 
            if(optparams.opttype=='add'){
                this.resetUrlKey();
                let _refeshid = -1;
                if(this.state.refeshid==-1){
                    _refeshid = 0;
                }
                taskMainStores.slidevisible = true;
                const {_top} = this.state;
                this.setState({content:<TaskDetail ecId={`${this && this.props && this.props.ecId || ''}_TaskDetail@emx5md`} detailKey={optparams.datas[0].key} refeshid={_refeshid} isopen={true} minusHeight={_top} sorttype={taskMainStores.sorttype} onEditSuccess={(arry,type)=>this.onCallBackSuccess(arry,type)}/>,refeshid:_refeshid,createvisable:false});
            }
            if(optparams.opttype=='del'){
                this.onCloseSlideModal();
            }
        }
    }
    //是否显示高级搜索
    showAdvanced(type){
        this.setState({showSearchAd:false});
    }
    onNodeClick(key,type,firstview){//列表点击事件
        const { taskMainStores } = this.props;
        taskMainStores.slidevisible = true;
        const {_top} = this.state;
        let _refeshid = -1;
        this.firstview = firstview;
        if(this.state.refeshid==-1){
            _refeshid = 0;
        }
        this.resetUrlKey();
        this.setState({content:<TaskDetail ecId={`${this && this.props && this.props.ecId || ''}_TaskDetail@cizhd5`} detailKey={key} refeshid={_refeshid} isopen={true}  minusHeight={_top} onCheckNew={this.onMainCheckNew} onEditSuccess={(arry,type)=>this.onCallBackSuccess(arry,type)} sorttype={taskMainStores.sorttype} isFb={type}/>,refeshid:_refeshid});
    }
    onMainCheckNew = ()=>{//回调检查新任务总数
        if(this.firstview && typeof this.props.onCheckNew==="function"){
            this.props.onCheckNew();
        }
    }
    onTopClick(e){//点击隐藏右边弹出框
        const { taskMainStores } = this.props;
        if(taskMainStores.slidevisible){
            taskMainStores.slidevisible = false;
        }
    }
    getTopHeight(header){
        let h = 0;
        if(header){
            h = header.clientHeight || 0;
        }
        return h;
    }
    getTabButtonsAd(ecId) {//高级搜索按钮
        return [
            (<Button ecId={`${ecId || ''}_Button@26w7c4@search`} type="primary" onClick={()=>this.advanceSearch()}>{getLabel(197,'搜索')}</Button>),
            (<Button ecId={`${ecId || ''}_Button@0bj7bm@reset`} type="ghost" onClick={()=>this.resetSearch()}>{getLabel(2022,'重置')}</Button>),
            (<Button ecId={`${ecId || ''}_Button@os7z12@cancel`} type="ghost" onClick={()=>this.showAdvanced(false)}>{getLabel(31129,'取消')}</Button>)
        ]
    }
    //高级搜索条目
    getSearchsAd(ecId){
        const {taskMainStores}  = this.props;
        const{orderData,orderByData,levarray} = this.state;
        let {taskname,begindate,begindate1,tag,hrmid,enddate,enddate1,lev,principalid,orderby,orderbytype,condtype, dataShowType}= taskMainStores;
        let arry =[];
        arry.push({com:<WeaFormItem ecId={`${ecId}_WeaFormItem@b2aptq@taskname`} label={getLabel(1352,'任务名称')} ratio1to2><WeaInput ecId={`${ecId}_WeaInput@3z5jcm@taskname`}  value={taskname} onChange={(value) => this.onSearchChange(value,'taskname')} onPressEnter={()=>this.advanceSearch()}/></WeaFormItem>});
        arry.push({com:<WeaFormItem ecId={`${ecId}_WeaFormItem@no0wlj@principalid`} label={getLabel(84043,'责任人')} ratio1to2><WeaBrowser ecId={`${ecId}_WeaBrowser@ogztg9@principalid`} type={1} replaceDatas={toJS(principalid)}
        onChange={(ids, names, datas) => this.onSearchChange(datas, "principalid")} title={getLabel(84043,'责任人')}/></WeaFormItem>});
        arry.push({com:<WeaFormItem ecId={`${ecId}_WeaFormItem@8xzfid@lev`} label={getLabel(15534,'紧急程度')} ratio1to2><WeaSelect ecId={`${ecId}_WeaSelect@dpa7zh@lev`} options={levarray} value={lev} onChange={(val)=>this.onSearchChange(val,'lev')}/></WeaFormItem>});
        arry.push({com:<WeaFormItem ecId={`${ecId}_WeaFormItem@2963v3@begindate`} label={getLabel(740,'开始日期')} ratio1to2>
        <Row ecId={`${ecId}_Row@qcew5a@begindate`}>
            <Col ecId={`${ecId}_Col@9bbx26@begindate`} span={11}><WeaDatePicker ecId={`${ecId}_WeaDatePicker@icgmtc@begindate`} value={begindate} onChange={value => this.onSearchChange(value, "begindate")}/></Col>
            <Col ecId={`${ecId}_Col@lrx2zt@begindate2`} span={2} style={{textAlign:"center"}}></Col>
            <Col ecId={`${ecId}_Col@u81r6j@begindate1`} span={11}><WeaDatePicker ecId={`${ecId}_WeaDatePicker@9lggya@begindate1`} value={begindate1} onChange={value => this.onSearchChange(value, "begindate1")}/></Col>
        </Row></WeaFormItem>});
        arry.push({com:<WeaFormItem ecId={`${ecId}_WeaFormItem@4fivpv@enddate`} label={getLabel(741, '结束日期')} ratio1to2>
        <Row ecId={`${ecId}_Row@o6npp8@enddate`}>
            <Col ecId={`${ecId}_Col@66fzoa@enddate`} span={11}><WeaDatePicker ecId={`${ecId}_WeaDatePicker@jzjusi@enddate`} value={enddate} onChange={value => this.onSearchChange(value, "enddate")}/></Col>
            <Col ecId={`${ecId}_Col@n62d4i@enddate2`} span={2} style={{textAlign:"center"}}></Col>
            <Col ecId={`${ecId}_Col@lwhi1v@enddate1`} span={11}><WeaDatePicker ecId={`${ecId}_WeaDatePicker@5hfbsm@enddate1`} value={enddate1} onChange={value => this.onSearchChange(value, "enddate1")}/></Col>
        </Row>
        </WeaFormItem>});
        arry.push({com:<WeaFormItem ecId={`${ecId}_WeaFormItem@8fwp5z@orderby`} label={getLabel(129216,'排序方式')} ratio1to2>
        <Row ecId={`${ecId}_Row@vxdglr@orderby`}>
            <Col ecId={`${ecId}_Col@m3rhkw@orderby`} span={11}><WeaSelect ecId={`${ecId}_WeaSelect@oj5gxi@orderby`} options={orderData} viewAttr={2}  value={orderby} onChange={v => this.onSearchChange(v,"orderby")}/></Col>
            <Col ecId={`${ecId}_Col@30mnzb@orderby1`} span={2}></Col>
            <Col ecId={`${ecId}_Col@2vhq7y@orderbytype`} span={11}><WeaSelect ecId={`${ecId}_WeaSelect@j3gysx@orderbytype`} options={orderByData} viewAttr={2}  value={orderbytype} onChange={v => this.onSearchChange(v,"orderbytype")}/></Col>
        </Row>
        </WeaFormItem>});
        // arry.push({com:<WeaFormItem label={getLabel(30878,'标签')} ratio1to2>
        //  //<WeaInput  value={tag} onChange={(value) => this.onSearchChange(value,'tag')}/>
        //  <WeaBrowser type={"wrltag"} replaceDatas={toJS(tag)} hasAdvanceSerach={true}
        //     onChange={(ids, names, datas) => this.onSearchChange(datas, "tag")} title={getLabel(30878,'标签')}/>
        // </WeaFormItem>});
        if(condtype==0){
            arry.push({com:<WeaFormItem ecId={`${ecId}_WeaFormItem@41nnzl@hrmid`} label={getLabel(15089,'我的下属')} ratio1to2>
            <WeaBrowser ecId={`${ecId}_WeaBrowser@vy5mxd@hrmid`} type={"wrltsk"} replaceDatas={toJS(hrmid)}
             completeURL = "/api/workrelate/task/doorpage/getUnderlingHrmInfo?"
              hideOps={true} onChange={(ids, names, datas)=> this.onSearchChange(datas,'hrmid')} />
           </WeaFormItem>});
        }
        return <WeaSearchGroup ecId={`${ecId}_WeaSearchGroup@pjx9y5`} title={getLabel(32905,'常用条件')} items={arry} showGroup={true} col={2}/>
    }
    onTagSelectChange = (tagList) => {
        const { taskMainStores } = this.props
        let ckids = tagList.reduce((ids, elem) => {
            ids += elem.id + ","
            return ids
        }, "")
        ckids = ckids.endsWith(",") ? ckids.substring(0, ckids.length - 1) : ckids
        taskMainStores.tag = ckids
        taskMainStores.getTaskList({})
    }
    getLeftCom(){//WeaTab组件左边自定义
       const {sorttype,currentstatus,condtype,isOutSearch, dataShowType, changeDataShowType, getTaskList, tag} = this.props.taskMainStores; 
       const{statusArray} = this.state;
       return <div className="task-main-condition">
                <div className="task-main-condition-right">
                    <div className="task-main-icon-div">
                        {!isOutSearch && <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@209s4c`} placement="bottom" title={getLabel(382491,'个人Todolist视图')}><i className={sorttype==5?"icon-coms-currency-Customer iconselected":"icon-coms-currency-Customer"} onClick={(e)=>this.onSortcondClick(5)}/></Tooltip>}
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@l1p231`} placement="bottom" title={getLabel(382493,'到期日分类视图')}><i className={sorttype==2?"icon-coms-overtime iconselected":"icon-coms-overtime"} onClick={(e)=>this.onSortcondClick(2)}/></Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@9ekwca`} placement="bottom" title={getLabel(382495,'紧急程度分类视图')}><i className={sorttype==3?"icon-coms-category iconselected":"icon-coms-category"} onClick={(e)=>this.onSortcondClick(3)}/></Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@yhncll`} placement="bottom" title={getLabel(82532,'列表视图')}><i className={sorttype==1?"icon-coms-Right-alignment iconselected":"icon-coms-Right-alignment"} onClick={(e)=>this.onSortcondClick(1)}/></Tooltip>
                        {!isOutSearch && <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@wmwpdx`} placement="bottom" title={getLabel(382496,'层级视图')}><i className={sorttype==4?"icon-coms-Department-number iconselected":"icon-coms-Department-number"} onClick={(e)=>this.onSortcondClick(4)}/></Tooltip>} 
                    </div>
                    {sorttype!=5 && condtype!=7 && !isOutSearch && <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@zyelpe`} options={statusArray} detailtype={5} value={currentstatus} viewAttr={2} style={{width:80}}  onChange={v => this.onSearchChange(v,"currentstatus")}/>}
                    <span className="tag-select-wrapper"><TagSelectBox ecId={`${this && this.props && this.props.ecId || ''}_TagSelectBox@cwr3a9`} onCallBack={this.onTagSelectChange} value={tag} /></span>
                </div>
              </div>;
    }
    onTagSet(v,_type,_key){
        this.setState({tagvisable:v,opentagtype:_type,selecttaskid:_key});
    }
    treeOtherClick(key,_v,type,currentid,cb){
        const { taskMainStores } = this.props;
        if(type=='deltag'){
            taskMainStores.editTaskTag({delvalue:_v,fieldname:"tag",taskId:key,tagtype:"1",doback:function(){
                message.success(getLabel(83472,'删除成功!'), 2);
                typeof cb === "function" && cb()
            }});
        }else if(type=='checkbox'){
            let isSelect = Util.isSelectCheckBox(taskMainStores.datalist,_v);
            let isallselect = Util.isAllSelectCheckBox(taskMainStores.datalist,"0",currentid);//是否全选
            taskMainStores.setAllCheckBoxValue(isallselect?"1":"0",currentid);
            taskMainStores.setDropDisplay(isSelect);
        }
    }
    checkAll(v,currentid){
        const { taskMainStores } = this.props;
        let {datalist,sorttype} = taskMainStores;
        taskMainStores.refreshlist = false;
        Util.setDataCheckBoxValue(datalist,v,currentid,sorttype,this.state.dropSelectedKey);
        taskMainStores.datalist = datalist;
        taskMainStores.setAllCheckBoxValue(v,currentid);
        taskMainStores.setDropDisplay(Util.isSelectCheckBox(datalist,v));
        taskMainStores.refreshlist = true;
    }
    btnOnClick(key){
        const { taskMainStores } = this.props;
        const { dataShowType, tableSelectedRowKeys } = taskMainStores
        if(key==1){
            let taskIds
            if (dataShowType == "2") {
                taskIds = tableSelectedRowKeys.join(",")
            } else {
                taskIds = Util.getDataListIds(taskMainStores.datalist,true,taskMainStores.sorttype)
            }

            if(taskIds==""){
                message.warning(getLabel(501159, '请选择要操作的数据'));
                return;
            }
            Modal.confirm({
                title: getLabel(131329,'信息确认'),
                content: getLabel(513503,'确认要删除选中记录吗？'),
                onOk() {
                    taskMainStores.batchDelTask({taskIds:taskIds,doback:function(status){
                        message.success(getLabel(83472,'删除成功!'), 2);
                    }});
                },
                onCancel() {},
            });
        }else{
            taskMainStores.checkedIds = "";
            this.onTagSet(true,1);
        }
    }
    checkList(key,checklist){
        const {taskMainStores} = this.props;
        const { dataShowType, tableSelectedRowKeys } = taskMainStores
        let {opentagtype,selecttaskid} = this.state;
        let taskids= "";

        if (dataShowType == "2") {
            if (opentagtype == 1) {
                taskids = tableSelectedRowKeys.join(",")
            } else {
                taskids = selecttaskid
            }
        } else {
            if(opentagtype==1){
                taskids = Util.getDataListIds(taskMainStores.datalist,false,taskMainStores.sorttype);
            }else{
                taskids = selecttaskid;
            }
        }

        if(taskids==""){
            message.warning(getLabel(501159, '请选择要操作的数据'));
            return;
        }
        this.onTagSet(false,1);
        if(key=="0"){//清除
            let _title = opentagtype==1?getLabel(516448, "确定要清除选中数据的所有标签吗？"):getLabel('516445','确认清除所有标签吗？');
            Modal.confirm({
                title: getLabel(386786, '信息确认'),
                content: _title,
                onOk: () => {
                    taskMainStores.editTaskTag({fieldname:"tag",taskids:taskids,tagtype:"3"});
                }
            })
        }else if(key=="1"){//确定
            let newIdsStr = checklist.map((d, i) => d.id).join(",");
            taskMainStores.editTaskTag({addvalue:newIdsStr,fieldname:"tag",taskids:taskids,tagtype:"2",opentagtype:opentagtype});
        }
    }

    onTableTaskTagClose = (e, taskid, deltagid) => {
        e.preventDefault()
        e.stopPropagation()
        this.treeOtherClick(taskid, deltagid, "deltag", null, this.reloadCurrentPage.bind(this))
    }

    onDropMenuClick = (key) => {
        const { taskMainStores } = this.props
        this.setState({dropSelectedKey: key})
        taskMainStores.isBatchDel = key == "1"
        if (taskMainStores.dataShowType == "2") {
            taskMainStores.getTaskList({isReloadCurrent: true})
        }
    }

    getTableColumns = (columns) => {
        return columns.map(col => {
            if (col.dataIndex != "name" ) {
                col = {...col, width: 130}
            }
            
            if (col.dataIndex == "id") {
                return {...col, display: false}
            } else if (col.dataIndex == "name" || col.dataIndex == "parentid") {
                return {
                    ...col,
                    render: (text, record, index) => {
                        let m = JSON.parse(record[col.dataIndex + "span"])
                        return (
                            <div className="colomn-taskname-wrapper" style={col.dataIndex == "name" ? {cursor: "pointer"} : {}} title={m.name} onClick={e => {
                                if (col.dataIndex == "name") {
                                    e.stopPropagation()
                                    e.nativeEvent.stopImmediatePropagation()
                                    this.onNodeClick(m.id)
                                }
                            }}>
                                <div className="task-text">{m.name}</div>
                                <div className="task-tag">
                                    {
                                        m.tags && m.tags.map(tag => {
                                            return (
                                                <span className="tag-item-wrapper">
                                                    <WeaTag ecId={`${this && this.props && this.props.ecId || ''}_WeaTag@xb8onk@${tag.id}`} color={tag.color} title={tag.name} closable={true} onClose={e => this.onTableTaskTagClose(e, record.id, tag.id)} ref={ref => {
                                                        if (ref) {
                                                            let dom = ReactDOM.findDOMNode(ref)
                                                            dom.parentNode.style.width = dom.clientWidth + 19 + "px"
                                                        }
                                                    }}>{tag.name}</WeaTag>
                                                </span>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        )
                    }
                }
            } else if (col.dataIndex == "taskprogress") {
                return {
                    ...col,
                    render: (text, record, index) => {
                        return <div className="colomn-progress-wrapper"><WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@r0rx2q@${record.id}`} percent={text || "0"} strokeColor={text == 100 ? "#68D358" : "#2DB7F5"}/></div>
                    }
                }
            }
            return col
        })
    }

    reloadCurrentPage = () => {
        const { tableStore } = this.props.taskMainStores
        tableStore.reloadCurrent()
    }

    onTableOperatesClick = (event, record, btn, comsbtn, tags) => {
        if (btn.type == "addfb") {
            event.stopPropagation()
            this.onNodeClick(record.id, "1")
        } else {
            this.onRightBtnClick(record.id, btn, comsbtn, tags, this.reloadCurrentPage.bind(this))
        }
    }

    getCustomOperates = (record, index, operates) => {
        const comsbtn = JSON.parse(record.comsbtnspan)
        const tags = JSON.parse(record.namespan).tags
        return (
            <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@ya9jfp`}>
                {
                    comsbtn.reverse().map(btn => {
                        return (
                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_Menu.Item@kaclhs@${btn.type}`}>
                                <div 
                                    ref={ref => {
                                        if (ref) {
                                            ref.onclick = (e) => {
                                                this.onTableOperatesClick(e, record, btn, comsbtn, tags)
                                            }
                                        }
                                    }}
                                >
                                    {
                                        btn.com
                                    }
                                </div>
                            </Menu.Item>
                        )
                    })
                }
            </Menu>
        )
    }

    onTableSelectChange = (ids, records) => {
        this.props.taskMainStores.tableSelectedRowKeys = ids
        this.props.taskMainStores.setDropDisplay(ids.length !== 0)
    }
    importTask(flag,type){
        this.setState({importvisable:flag});
        if(type==1){
            this.advanceSearch();
        }
    }
    render() {
        const { taskMainStores,toptitle } = this.props;
        const {content,_top,menuid,showSearchAd,createvisable,tagvisable,dropData,dropSelectedKey,collectParams,importvisable} = this.state;
        const {addname,datalist,pagenum,itotal,refreshlist,optparams,localtime,loading,slidevisible,sorttype,hasmore,datetype,taskname,dropdisplay,checkedIds,allCheckBoxVal,tableStore,dataShowType} = taskMainStores;
        let menu = this.getMenu()
        
        return (
            <div className="wea-workrelate-task-main">
               <div onClick={(e)=>this.onTopClick(e)}>
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@bhub23`} spinning={loading}>
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@18qx2q`} datas={menu} showUrlItem={false} style={{height:'100%'}} collectParams={collectParams}>
                        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@bnx7qg`} title={toptitle || getLabel(18505,'任务列表')}
                            icon={<i className='icon-coms-implement' />}
                            iconBgcolor='rgb(150, 53, 138)'
                            buttons = {[<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@1s6cus@addtask`} title={getLabel(15266,'新建任务')}><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@n0hglx@addtask`} type='primary' onClick={()=>this.onAddTask(-2)}>{getLabel(82,'新建')}</Button></Tooltip>,
                            <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@lbqcm6@importtask`} title={getLabel(28577,'导入任务')}><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@672l40@importtask`} type='primary' onClick={()=>this.importTask(true)}>{getLabel(28577,'导入任务')}</Button></Tooltip>,
                            <ButtonSelect ecId={`${this && this.props && this.props.ecId || ''}_ButtonSelect@bnrwue@batchbtn`} datas={dropData} btnProps={{disabled:dropdisplay}} selectedKey={dropSelectedKey} btnOnClick={(key) => this.btnOnClick(key)} menuOnClick={(key)=> this.onDropMenuClick(key)}/>
                            ]} 
                            showDropIcon={true} dropMenuDatas={menu} />
                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@5csi08`}
                            searchType={["advanced", "base"]}
                            showSearchAd={showSearchAd}
                            hideSearchAd={() => this.showAdvanced()}
                            advanceHeight={260}
                            setShowSearchAd={bool => {
                                this.setState({ showSearchAd: bool });
                            }}
                            replaceLeft={this.getLeftCom()}
                            buttonsAd={this.getTabButtonsAd(this.props.ecId || '')}
                            onSearch={() => this.advanceSearch()}
                            onSearchChange={(v) => this.onTabSearchChange(v)}
                            searchsBaseValue={taskname}
                            searchsAd={this.getSearchsAd(this.props.ecId || '')} />
                        <div style={{height:window.innerHeight-120-_top}}>
                            {
                                sorttype != "1" &&
                                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@ku1a3g`} height={window.innerHeight-120-_top}>
                                    {refreshlist && sorttype==4 && <div className={datalist && datalist.length>0?"workrelate-task-main-content":"workrelate-task-main-content1"}>
                                    <div className="workrelate-task-checkboxall"><WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@1d1n09`} content={getLabel(556,'全选')} value={allCheckBoxVal} onChange={(v)=>this.checkAll(v)}/></div>
                                    <ViewTree ecId={`${this && this.props && this.props.ecId || ''}_ViewTree@0uh7gz`} className="workrelate-task-main-vt" datas={datalist} params={toJS(optparams)} locationkey={localtime}
                                        onRightBtnClick={(key,element,comsbtn,_v,_tags)=>this.onRightBtnClick(key,element,comsbtn,_tags)} onTreeNodeClick ={(key,firstview)=>this.onNodeClick(key,'',firstview)}
                                        onIconClick={(key)=>this.onIconClick(key)} onOtherClick={(key,_v,_type)=>this.treeOtherClick(key,_v,_type)} boxProp={dropSelectedKey}/></div>}
                                    { sorttype==4 && <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@w9u5oa`} className="add-intext" placeholder={getLabel(508695,'请输入一句话快速创建任务')} value={addname} onBlur={val => this.onAddTask('',val)} onFocus={(e)=>this.onTopClick(e)} onPressEnter={(e)=>this.onEnterTask(e,'')}/>
                                    }
                                    {
                                    sorttype==4 && (hasmore && hasmore==2  ?<div className="task-main-more" onClick={e=>this.showMore(e,0,itotal,pagenum)}>{getLabel(82720,'加载更多')}<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@taxk0c`} type="down" /></div>
                                                            :<div className="task-main-nodata">{hasmore==3?getLabel(508804,'已加载所有任务'):getLabel(83553,'暂无数据')}</div>)
                                    }
                                    {
                                    refreshlist && (sorttype == 2 || sorttype == 3 || sorttype == 5) && datetype && datetype.length>0 && datetype.map((element,idx)=>{
                                            return <ViewSort ecId={`${this && this.props && this.props.ecId || ''}_ViewSort@crfl92@${element.id}`} title={<span><span className="workrelate-task-checkboxall-d"><WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@lyb0f8@${element.id}`} value={element.allCheckBoxVal} onChange={(v)=>this.checkAll(v,element.id)}/></span><i className={element.icon} style={{color:element.color}}/><span className="task-main-viewsort-titlename">{element.name}</span></span>} className="task-main-viewsort" style={{borderLeft:`2px solid ${element.color}`,backgroundColor:"#F3F3F4"}} datatitle={element.datatitle}>
                                                <ViewTree ecId={`${this && this.props && this.props.ecId || ''}_ViewTree@k5kaqn@${element.id}`} className={element.hasdata && element.hasdata==1?"task-main-vt":""} datas={datalist} params={toJS(optparams)} locationkey={localtime} treetype={"m"+element.id}
                                                        onRightBtnClick={(key,element,comsbtn,_v,_tags)=>this.onRightBtnClick(key,element,comsbtn,_tags)} onTreeNodeClick ={(key,firstview)=>this.onNodeClick(key,'',firstview)}
                                                        onOtherClick={(key,_v,_type)=>this.treeOtherClick(key,_v,_type,element.id)} boxProp={dropSelectedKey}/>
                                                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@dl9brx@${element.id}`} className="add-intext" placeholder={getLabel(508695,'请输入一句话快速创建任务')} value={element.inputval} onBlur={val => this.onAddTask(element.id,val,idx)} onFocus={(e)=>this.onTopClick(e)}  onPressEnter={(e)=>this.onEnterTask(e,element.id,idx)}/>
                                                {element.hasmore==2 && <div className="task-main-more" onClick={e=>this.showMore(e,idx,element.total,element.pagenum,element.id)}>{getLabel(82720,'加载更多')}<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@4abyw1@${element.id}`} type="down" /></div>}
                                            </ViewSort>
                                        })
                                    }
                                </WeaNewScroll>
                            }
                            {
                                dataShowType == "1" && sorttype == "1" &&
                                <div style={{ height: Math.min(window.innerHeight-120-_top, 760) }}>
                                    {refreshlist && <div className={datalist && datalist.length>0?"workrelate-task-main-content":"workrelate-task-main-content1"} >
                                    <div className="workrelate-task-checkboxall"><WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@l5q79s`} content={getLabel(556,'全选')} value={allCheckBoxVal} onChange={(v)=>this.checkAll(v)}/></div>
                                    <WeaNewScrollPagination ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScrollPagination@v9jm4g`} height={Math.min(window.innerHeight-120-_top, 760) - 110} onScrollEnd={() => { hasmore == 2 && this.showMore(null, 0, itotal, pagenum) }}>
                                    <ViewTree ecId={`${this && this.props && this.props.ecId || ''}_ViewTree@07gurp`} className="workrelate-task-main-vt1" datas={datalist} params={toJS(optparams)} locationkey={localtime}
                                        onRightBtnClick={(key,element,comsbtn,_v,_tags)=>this.onRightBtnClick(key,element,comsbtn,_tags)} onTreeNodeClick ={(key,firstview)=>this.onNodeClick(key,'',firstview)}
                                        onIconClick={(key)=>this.onIconClick(key)} onOtherClick={(key,_v,_type)=>this.treeOtherClick(key,_v,_type)} boxProp={dropSelectedKey}/>
                                    </WeaNewScrollPagination></div>}
                                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@brz9l1`} className="add-intext" placeholder={getLabel(508695,'请输入一句话快速创建任务')} value={addname} onBlur={val => this.onAddTask('',val)} onFocus={(e)=>this.onTopClick(e)} onPressEnter={(e)=>this.onEnterTask(e,'')}/>
                                </div>
                            }
                            {
                                dataShowType == "2" && sorttype == "1" &&
                                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@kzbcjo`}
                                    className="workrelate-task-main-table"
                                    comsWeaTableStore={tableStore}
                                    hasOrder
                                    needScroll
                                    rowSelection={this.rowSelection}
                                    getColumns={this.getTableColumns}
                                    customOperates={this.getCustomOperates}
                                />
                            }
                        </div>
                    </WeaRightMenu>
                </Spin></div>
                <WeaSlideModal ecId={`${this && this.props && this.props.ecId || ''}_WeaSlideModal@0h1zpm`} visible={slidevisible}
                  width={60}
                  top ={_top}
                  direction={'right'}
                  measure={'%'}
                  measureT={'px'}
                  content={(content)}
                  onClose={() => this.onCloseSlideModal()}/>
                {createvisable && <TaskAdd ecId={`${this && this.props && this.props.ecId || ''}_TaskAdd@fkr59v`} isDialog={true} createvisable={createvisable}  style={{width: window.innerWidth*0.7, height: window.innerHeight-90}} _minusHeight={90}
                 sorttype={sorttype} onlyClose = {()=>this.setState({ createvisable: false })}  onAddSuccess={(arry)=>this.onCallBackSuccess(arry)} locationKey={new Date().getTime()}/>}
                {tagvisable && <TagChoiceBox ecId={`${this && this.props && this.props.ecId || ''}_TagChoiceBox@8cvi7j`} visible={tagvisable} checkedIds={checkedIds} onDialogClose={()=>this.onTagSet(false,1)} onCallBack={(key,checklist)=>this.checkList(key,checklist)}/>}
                {importvisable && <ImportIndex ecId={`${this && this.props && this.props.ecId || ''}_ImportIndex@q1e877`} importvisable={importvisable} onlyClose = {(v)=>this.importTask(false,v)}/>}
            </div>
        )
    }
};